<style lang="less" scoped>
.info-number-box {
  position: relative;
  margin-top: 10px;
  margin-bottom: 10px;
  .text {
    color: #64B6A8;
  }
  .tips {
    background-color: #fff;
    border: 1px solid #888;
    border-radius: 5px;
    position: absolute;
    top: 30px;
    left: 100px;
    padding: 5px;
    width: 100%;
    z-index: 1;

    &::before, &::after {
      width: 0px;
      height: 0px;
      padding: 0;
      border-left: 12px solid transparent;
      border-right: 10px solid transparent;
      content: '';
      position: absolute;
      left: 6px;
    }
    &::before {
      border-bottom: 12px solid #fff;
      z-index: 12;
      top: -10px;
    }
    &::after {
      border-bottom: 12px solid #888;
      z-index: 10;
      position: absolute;
      top: -12px;
    }
    .color {
      color: #64B6A8;
    }
  }
}
</style>

<template>

  <div class="info-number-box">
    <div class="text" @click="showTipsChange">
      信息编号：{{ infoId }}
    </div>
    <div v-show="showTips" class="tips">
      <p>信息编号是唯一的信息身份号码，可在帮帮同城进行准确搜索查找。</p>
      <p class="color">联系发布人时可通过信息编号确认信息。</p>
    </div>
  </div>
</template>

<script>
export default {
  props: ['infoId'],
  data(){
    return {
      showTips: false
    }
  },
  methods: {
    showTipsChange(){
      this.showTips = !this.showTips;
    }
  }
}
</script>
